<template>
  <div class="my-container">
    <el-row>
      <el-col :span="6">
        <project-card class="user-card" :features="featureData"></project-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <admin-info :userInfo="store.getters.userInfo"/>
        </el-card>
        <el-card style="margin-top:20px">
          <el-form 
            ref="updateFormRef" 
            :model="updateForm" 
            :rules="updateFormRules"
            label-width="80px" >
            <el-form-item prop="oldPassword" label="原密码">
              <el-input
                placeholder="请输入原密码"
                v-model="updateForm.oldPassword"
                type="password"
                :prefix-icon="Lock"
              />
            </el-form-item>
            <el-form-item prop="newPassword" label="新密码">
              <el-input
                placeholder="请输入新密码"
                type="password"
                show-password
                v-model="updateForm.newPassword"
                :prefix-icon="Lock"
              />
            </el-form-item>
            <el-form-item prop="confirm" label="确认密码">
              <el-input
                placeholder="请输入确认密码"
                type="text"
                show-password
                v-model="updateForm.confirm"
                :prefix-icon="Lock"
              />
            </el-form-item>
            <el-button 
              type="primary" 
              style="width: 100%; margin-bottom: 30px"
              :loading = "loading"
              @click = "handleUpdate"
            >修改密码</el-button
            >
      </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref ,reactive} from 'vue'
import ProjectCard from './components/ProjectCard.vue'
import AdminInfo from './components/adminInfo.vue'
import { useStore } from 'vuex'
import { Lock } from "@element-plus/icons-vue";
import {updateAdminPassword} from '@/api/user-manage'
import { ElMessage } from 'element-plus'


// 初始化store
const store = useStore()
// 初始化ref
const updateFormRef = ref(null)
// 表单数据
const updateForm = reactive({
    oldPassword: '',
    newPassword: '',
    confirm:'',
})
const loading = ref(false)
//原密码校验
const validateOldPassword = (rule, value, callback) => {
      if(!value.length){
        callback(new Error('原密码为必填项'))
      }else if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
//新密码校验
const validateNewPassword = (rule, value, callback) => {
      if(!value.length){
        callback(new Error('新密码为必填项'))
      }else if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
// 确认密码校验
const validateConfirm = (rule, value, callback) => {
      if(!value){
        callback(new Error('确认密码为必填项'))
      }else if(updateForm.newPassword != value){
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
// 表单验证
const updateFormRules = reactive({
  oldPassword: [
    {
      required: true,
      trigger: 'blur',
      validator: validateOldPassword
    }
  ],
  newPassword: [
    {
      required: true,
      trigger: 'blur',
      validator: validateNewPassword
    }
  ],
  confirm: [
    {
      required: true,
      trigger: 'blur',
      validator:validateConfirm
    }
  ]
})
// 点击修改密码调用的函数
const handleUpdate = () =>{
  updateFormRef.value.validate(async(valid) =>{
      if(!valid) return
      loading.value = true
      const data = {
        _id:store.getters.userInfo._id,
        oldPassword:updateForm.oldPassword,
        newPassword:updateForm.newPassword,
      }
      // 调用更新接口
      updateAdminPassword(data).then(
        ()=>{
            ElMessage.success('密码修改成功')
            loading.value = false,
            updateForm.oldPassword = ''
            updateForm.newPassword = ''
            updateForm.confirm = ''
        }
        ).catch((err)=>{
            Promise.reject(err)
            loading.value = false
        })
    })
}
</script>

<style lang="scss" scoped>
.my-container {
  .user-card {
    margin-right: 20px;
  }
}
</style>
